<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" width="800" :before-close="hideModal">
			<el-carousel height="67vh" :loop="false" :autoplay="false" indicator-position="outside" arrow="always" trigger="click" @change="bannerChange">
				<el-carousel-item v-for="item in infoDataList" :key="item">
					<div style="height: 100%; overflow: scroll; display: flex; justify-content: center; align-items: flex-start">
						<ThreeDPic ref="targetRef" :infoData="item" />
					</div>
				</el-carousel-item>
			</el-carousel>
			<template #footer>
				<div class="dialog-footer">
					<text
						>共<text style="color: red; font-weight: bold; margin-left: 2px; margin-right: 2px"> {{ infoData.winNoticeDetailsVos.length }} </text
						>项奖项，已分为<text style="color: red; font-weight: bold; margin-left: 2px; margin-right: 2px">{{ infoDataList.length }}</text
						>张图片</text
					>
					<text style="color: red; font-size: 12px"> * 点击图片左右的箭头切换图片 </text>
					<div style="display: flex; margin-top: 10px">
						<el-button type="primary" @click="captureAndDownload('current')"> 生成当前页图片 </el-button>
						<el-button type="danger" @click="captureAndDownload('all')"> 生成全部图片 </el-button>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import ThreeDPic from '../component/3DPic.vue';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

const emit = defineEmits(['handleClose']);

// 引用目标元素
const targetRef = ref(null);

async function captureAndDownload(type) {
	console.log('🚀 ~ targetRef:', targetRef.value);

	if (type == 'current') {
		targetRef.value[bannerIndex.value].captureAndDownload();
	} else {
		for (let item of targetRef.value) {
			await item.captureAndDownload();
		}
	}
}

const bannerIndex = ref(0);
function bannerChange(val) {
	console.log('🚀 ~ bannerChange ~ val:', val);
	bannerIndex.value = val;
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
const infoDataList = ref([]);
const winNoticeDetailsVos = ref([]);
const infoData = ref({});
const dialogVisible = ref(false);
async function showModal(item) {
	dialogVisible.value = true;

	if (item) {
		infoData.value = item;

		let arr = [];
		// arr.push({
		// 	gradeName: '奖等',
		// 	totalNum: '中奖注数',
		// 	totalNumProvinces: '单注金额（元）',
		// 	bonus: '中奖金额（元）',
		// });

		item.winNoticeDetailsVos?.forEach((childItem, childIndex) => {
			arr.push(childItem);
		});
		winNoticeDetailsVos.value = arr;

		let num = Math.ceil(item.winNoticeDetailsVos.length / 3);

		let arr1 = splitArrayIntoParts(winNoticeDetailsVos.value, num);
		// arr1.forEach((item) => {
		// 	item.unshift({
		// 		gradeName: '奖等',
		// 		totalNum: '中奖注数',
		// 		totalNumProvinces: '单注金额（元）',
		// 		bonus: '中奖金额（元）',
		// 	});
		// });

		infoDataList.value = arr1.map((item) => {
			console.log('🚀 ~ showModal ~ item:', item);
			return {
				...infoData.value,
				winNoticeDetailsVos: item,
			};
		});
	}
}

/**
 * 将数组平均分成几份
 * @param {Array} arr - 要分割的数组
 * @returns {Array} 包含4个子数组的数组
 */
function splitArrayIntoParts(arr, num) {
	const result = [];
	const length = arr.length;
	// 计算每份的基础长度和剩余元素
	const baseSize = Math.floor(length / num);
	const remainder = length % num;

	let start = 0;

	for (let i = 0; i < num; i++) {
		// 前remainder份多分配1个元素
		const currentSize = baseSize + (i < remainder ? 1 : 0);
		// 从start开始截取currentSize个元素
		const part = arr.slice(start, start + currentSize);
		result.push(part);
		// 更新下一份的起始索引
		start += currentSize;
	}

	return result;
}

function hideModal() {
	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.lottery-notice {
	width: 619px;
	height: 1091.8px;
	font-family: 'Microsoft Yahei', sans-serif;
	background-color: #fdf5e6; /* 模拟浅黄色背景 */
	padding: 20px;
	border-radius: 8px;
	// max-width: 600px;
	margin: 20px auto;
	background: url('/@/assets/lottery/3d_logo.png') no-repeat center top;
	background-size: 100% 100%;

	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.title {
	text-align: center;
	margin-bottom: 20px;
}

.title h1,
.title h2 {
	color: #00008b; /* 深蓝色标题 */
	margin: 10px 0;
}

.title h1 {
	font-size: 24px;
}

.title h2 {
	font-size: 20px;
}

.issue,
.draw-date {
	font-size: 16px;
	color: #333;
	margin: 5px 0;
}

.winning-numbers-section {
	text-align: center;
	margin-bottom: 20px;
	margin-top: 315px;

	color: #405e89;
}

.winning-numbers-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1; /* 皇家蓝标题栏 */
	padding: 8px 0;
	margin-bottom: 15px;
	border-radius: 4px;
}

.numbers {
	display: flex;
	justify-content: center;
	gap: 63px;
	text-align: center;
	width: 100%;
	margin-left: 7px;

	font-size: 36px;
	font-weight: bold;
}

.number-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 1px solid #ccc;
	font-size: 28px;
	font-weight: bold;
	background-color: #fff;
	border-radius: 4px;
}

.winning-results-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
	width: 100%;
}

.results-table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin-top: 35px;
	margin-left: 5px;
}

.results-table td {
	// border: 1px solid #ccc;
	// padding: 8px;

	color: #405e89;
	font-size: 14px;
	font-weight: bold;
	height: 46px;
}

.amount-section .amount-item {
	margin-bottom: 15px;
}

.amount-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
}

.amount {
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color: #405e89;
}

.claim-deadline-section h3 {
	font-size: 18px;
	color: #fff;
	background-color: #4169e1;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
}

.claim-deadline-section {
	margin-top: 50px;
	color: #405e89;
	font-weight: bold;
}

.claim-deadline-section p {
	text-align: center;
	margin: 5px 0;
	line-height: 1.5;
}

.dialog-footer {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: -10px;
}
</style>
